import React, { Component } from 'react';
import { NavBar, Grid, Button, List, TextareaItem, Icon, Popover, Toast } from 'antd-mobile';
import { connect } from 'dva';
import styles from './index.css';

const Item = Popover.Item;

class PerfectInfo extends Component {
  state = {
    avatarImg: undefined,
    formatImgs: [],
    position: undefined,
    positionDesc: undefined,
    maskVisible: false
  }
  componentDidMount () {
    const flatImgs = [
      'https://cs-static-assets.oss-cn-beijing.aliyuncs.com/react-socket-io/tx1.jpg',
      'https://cs-static-assets.oss-cn-beijing.aliyuncs.com/react-socket-io/tx2.jpg',
      'https://cs-static-assets.oss-cn-beijing.aliyuncs.com/react-socket-io/tx3.jpg',
      'https://cs-static-assets.oss-cn-beijing.aliyuncs.com/react-socket-io/tx4.jpg',
      'https://cs-static-assets.oss-cn-beijing.aliyuncs.com/react-socket-io/tx5.jpg',
      'https://cs-static-assets.oss-cn-beijing.aliyuncs.com/react-socket-io/tx6.jpeg',
      'https://cs-static-assets.oss-cn-beijing.aliyuncs.com/react-socket-io/tx7.jpg',
      'https://cs-static-assets.oss-cn-beijing.aliyuncs.com/react-socket-io/tx8.jpg',
      'https://cs-static-assets.oss-cn-beijing.aliyuncs.com/react-socket-io/tx9.jpeg',
      'https://cs-static-assets.oss-cn-beijing.aliyuncs.com/react-socket-io/tx10.jpg',
      'https://cs-static-assets.oss-cn-beijing.aliyuncs.com/react-socket-io/tx11.jpeg',
      'https://cs-static-assets.oss-cn-beijing.aliyuncs.com/react-socket-io/tx12.jpeg',
      'https://cs-static-assets.oss-cn-beijing.aliyuncs.com/react-socket-io/tx13.jpg',
      'https://cs-static-assets.oss-cn-beijing.aliyuncs.com/react-socket-io/tx14.jpg',
      'https://cs-static-assets.oss-cn-beijing.aliyuncs.com/react-socket-io/tx15.jpg',
      'https://cs-static-assets.oss-cn-beijing.aliyuncs.com/react-socket-io/tx16.jpg',
      'https://cs-static-assets.oss-cn-beijing.aliyuncs.com/react-socket-io/tx17.jpg',
      'https://cs-static-assets.oss-cn-beijing.aliyuncs.com/react-socket-io/tx18.jpg'
    ]
    const formatImgs = flatImgs.map((avatar, index) => {
      const iconText = String(index + 1).padStart(2, 0);
      return {
        icon: avatar,
        text: `头像${iconText}`
      }
    })
    this.setState({ formatImgs });
    // 解决Grid组件的isCoursel属性初始高度异常的问题
    // 解决方案：手动延迟派发一个事件
    this.eventTimer = setTimeout(() => {
      window.dispatchEvent(new Event('resize'));
    }, 0);
  }
  componentWillUnmount() {
    // 清除延时器任务
    clearTimeout(this.eventTimer);
  }
  handleClick (el) {
    this.setState({
      avatarImg: el.icon
    })
  }
  
  renderSelectAvatar () {
    const { avatarImg } = this.state;
    return avatarImg && (
      <div>
        当前选中的是：
        <img
          width="40"
          height="40"
          className={styles.selectImg}
          src={avatarImg}
          alt="avatar img"
        />
      </div>
    )
  }
  handleInput (inputType, val) {
    this.setState({ [inputType]: val });
  }
  handleSubmit () {
    const { dispatch } = this.props;
    const { avatarImg, position, positionDesc } = this.state;
    dispatch({
      type: 'user/updateCurrentUser',
      payload: {
        avatar: avatarImg,
        position,
        positionDesc
      },
      cb: () => {
        Toast.success('修改成功', 1);
        this.setState({
          avatarImg: undefined,
          position: undefined,
          positionDesc: undefined
        })
      }
    })
  }
  // 退出登录
  handleSelect () {
    const { dispatch } = this.props;
    dispatch({
      type: 'user/logout',
      cb: () => {
        window.socket.disconnect();
      }
    })
    this.setState({ maskVisible: false });
  }
  render () {
    const { formatImgs, position, positionDesc, maskVisible } = this.state;
    return (
      <div className={styles.perfectInfo}>
        <NavBar
          mode="dark"
          rightContent={
            <Popover
              overlayClassName="fortest"
              overlayStyle={{ color: 'currentColor' }}
              visible={maskVisible}
              overlay={[
                (<Item style={{ backgroundColor: '#108ee9', color: '#fff' }} key="logout" value="logout">退出登录</Item>),
              ]}
              align={{
                overflow: { adjustY: 0, adjustX: 0 },
                offset: [-10, 0],
              }}
              onSelect={this.handleSelect.bind(this)}
            >
              <div style={{
                height: '100%',
                padding: '0 15px',
                marginRight: '-15px',
                display: 'flex',
                alignItems: 'center',
              }}
              >
                <Icon type="ellipsis" onClick={() => {this.setState({ maskVisible: true })}} />
              </div>
            </Popover>
          }
        >
          完善信息
        </NavBar>
        <List renderHeader={() => '选择头像'}>
          <Grid
            data={formatImgs}
            columnNum={3}
            isCarousel
            carouselMaxRow={3}
            onClick={this.handleClick.bind(this)}
          />
        </List>
        <List renderHeader={this.renderSelectAvatar.bind(this)}></List>
        <List renderHeader={() => '职位'}>
          <TextareaItem
            value={position}
            placeholder="最多输入10个字符"
            count={10}
            onChange={this.handleInput.bind(this, 'position')}
          />
        </List>
        <List renderHeader={() => '职位描述'}>
          <TextareaItem
            value={positionDesc}
            rows={5}
            count={100}
            placeholder="请输入职位描述"
            onChange={this.handleInput.bind(this, 'positionDesc')}
          />
        </List>
        <Button
          className={styles.submitBtn}
          type="primary"
          size="small"
          onClick={this.handleSubmit.bind(this)}
        >确定</Button>
      </div>
    )
  }
}
export default connect()(PerfectInfo);
